<template>
  <div id="feedback">
    <h1 class="con-right-title">
      意见反馈
    </h1>
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" plain @click="handleAll">
        导出数据
      </el-button>
      <freshCom @searchList="toSearch"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%" ref="table">
      <el-table-column
        prop="createdBy"
        label="用户ID"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="qq" label="QQ" min-width="100" align="center">
      </el-table-column>
      <el-table-column prop="spare" label="反馈来源类型" width="130">
        <template slot-scope="scope">
          <span>{{
            scope.row.spare === 'XCX' ? '小程序' : scope.row.spare
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="反馈类型"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="createdDate"
        label="反馈时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleComplain(scope.row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 添加\编辑学院弹窗 -->
    <handle-dialog
      v-if="handleDialogData.isShow"
      :handle-dialog-data="handleDialogData"
      @refreshList="refreshList"
    ></handle-dialog>
  </div>
</template>
<script>
import handleDialog from '@component/feedback/handleDialog'
import { filterImageMixins } from '@/mixins/filterImage'
import { saveScrollMixins } from '@/mixins/saveScroll'
import { getSearchList } from '@/api/classifyManage/feedback'
import { parseTime } from '@/utils'
import topSearch from '@component/feedback/topSearch' // 上部搜索条件

export default {
  name: 'feedback',
  msg: '意见反馈管理',
  mixins: [filterImageMixins, saveScrollMixins],
  components: {
    handleDialog,
    topSearch
  },
  data() {
    return {
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      pageInfo: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      handleDialogData: {
        isShow: false,
        params: '',
        type: ''
      },
      id: '',
      exportData: [],
      formInline: {
        keywordType: 'MOBILE',
        keyword: '',
        startTime: '',
        endTime: '',
        type: '',
        createTime: []
      }
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 获取列表 */
    searchList() {
      let params = { ...this.searchParams, ...this.formInline }
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.total = response.total
          this.tableData = response.rows
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 添加关键字
    handleAll() {
      getSearchList(
        this.pageInfo,
        (response) => {
          this.total = response.total
          this.exportData = this.exportData.concat(response.rows)
          if (response.rows.length > 0) {
            this.pageInfo.pageNum++
            this.handleAll()
          } else {
            import('@/vendor/Export2Excel').then((excel) => {
              const tHeader = [
                '用户ID',
                '昵称',
                '手机号码',
                'QQ',
                '反馈类型',
                '反馈时间',
                '反馈内容'
              ]
              const filterVal = [
                'createdBy',
                'nickname',
                'phone',
                'qq',
                'title',
                'createdDate',
                'content'
              ]
              const list = this.exportData
              const data = this.formatJson(filterVal, list)
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename:
                  '大鹏教育-高品质的设计师在线教育-意见反馈 用户反馈列表',
                autoWidth: true,
                bookType: 'xlsx'
              })
              // _this.downloadLoading = false
            })
          }
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /** 过滤 */
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'createdDate') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    // 编辑关键字/新增关键字
    handleComplain(row) {
      this.handleDialogData.isShow = true
      this.handleDialogData.params = row
    },
    refreshList() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#feedback {
  .img-box {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;

    .img-inner-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      text-align: center;

      .el-image {
        width: 100%;
        height: 100%;
      }

      img {
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
      }
    }

    .num {
      position: absolute;
      display: block;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 16px;
    }
  }
}
</style>
